import * as React from 'react';
import Box from '@/commonComponents/box/index';
import Passenger from '../passenger/index';
import { useNavigate } from 'react-router-dom';
import { useAppSelector, useAppDispatch } from '@/app/hooks';
import {
  selectPassengers,
  createAdult,
  createChild,
} from '@/pages/order/indexSlice';
import './index.module.scss';
const { memo, useMemo } = React;
interface LooseObject {
  [key: string]: string;
}
interface PassengersProps {
  onChange: (val: any) => void;
  setPassengers:any

}
function Passengers(props: PassengersProps) {
  const { onChange,setPassengers } = props;
  // const {
  //   passengers,
  //   createAdult,
  //   createChild,
  //   removePassenger,
  //   updatePassenger,
  //   showGenderMenu,
  //   showFollowAdultMenu,
  //   showTicketTypeMenu,
  // } = props;
  const navigate = useNavigate();
  const passengers = useAppSelector(selectPassengers);
  
  const nameMap = useMemo(() => {
    const ret: LooseObject = {};
    for (const passenger of passengers) {
      ret[passenger.id] = passenger.name ? passenger.name : '';
    }
    return ret;
  }, [passengers]);
  React.useEffect(() => {
    onChange(passengers.map((item) => item.name));
  }, []);
  const choosePassenger = () => {
    navigate(`/passengers?show=1`);
  };
  const dispatch = useAppDispatch();
  return (
    <Box data={[1]} isLoading={false} styleName="passengers-box">
      <ul>
        {passengers.map((passenger) => {
          return (
            <Passenger
              id={passenger.id}
              name={passenger.name}
              followAdult={passenger.followAdult}
              ticketType={passenger.ticketType === '成人票' ? 'adult' : passenger.ticketType}
              licenceNo={passenger.licenceNo}
              gender={passenger.gender}
              birthday={passenger.birthday}
              key={passenger.id}
              followAdultName={
                passenger.followAdult ? nameMap[passenger.followAdult] : ''
              }
            // onRemove={removePassenger}
            // onUpdate={updatePassenger}
            // showTicketTypeMenu={showTicketTypeMenu}
            // showGenderMenu={showGenderMenu}
            // showFollowAdultMenu={showFollowAdultMenu}
            />
          );
        })}
      </ul>
      <section styleName="add">
        <div styleName="adult" onClick={() => dispatch(createAdult([]))}>
          添加成人
        </div>
        <div styleName="choose" onClick={() => choosePassenger()}>
          选择乘客
        </div>
        {/* <div styleName="child" onClick={() => dispatch(createChild())}>
          添加儿童
        </div> */}
      </section>
    </Box>
  );
}

export default memo(Passengers);
